JavaScript 성능 최적화: 코드 분할 vs. 지연 평가

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

이 예제에서 OtherComponent는 렌더링될 때만 로드됩니다. 로드되는 동안 사용자는 "Loading..." 메시지를 보게 됩니다.

코드 분할 도구

• Webpack: 다양한 코드 분할 기술을 지원하는 널리 사용되는 모듈 번들러입니다.
• Rollup: 작고 효율적인 번들을 만드는 데 중점을 둔 또 다른 모듈 번들러입니다.
• Parcel: 코드 분할을 자동으로 처리하는 제로 구성 번들러입니다.
• Vite: 빠른 개발 및 최적화된 프로덕션 빌드를 위해 기본 ES 모듈을 활용하는 빌드 도구입니다.

지연 평가: 계산 지연

지연 평가란 무엇입니까?

지연 평가(지연 평가라고도 함)는 식의 값이 실제로 필요할 때까지 식의 평가를 지연시키는 프로그래밍 기술입니다. 즉, 계산은 결과를 미리 적극적으로 계산하는 대신 결과가 필요할 때만 수행됩니다.

여러 코스 요리를 준비한다고 상상해 보세요. 모든 요리를 한 번에 요리하지 않을 것입니다. 대신 각 요리를 제공할 때만 준비합니다. 지연 평가는 결과가 필요할 때만 계산을 수행하는 유사한 방식으로 작동합니다.

지연 평가 작동 방식

JavaScript에서는 다양한 기술을 사용하여 지연 평가를 구현할 수 있습니다.

• 함수: 식을 함수로 래핑하면 함수가 호출될 때까지 평가를 지연할 수 있습니다.
• 생성기: 생성기는 주문형으로 값을 생성하는 반복기를 만드는 방법을 제공합니다.
• 메모이제이션: 메모이제이션은 비용이 많이 드는 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하는 것을 포함합니다.
• 프록시: 프록시를 사용하여 속성 액세스를 가로채고 속성 값이 실제로 액세스될 때까지 계산을 지연할 수 있습니다.

지연 평가의 이점

• 향상된 성능: 불필요한 계산을 지연함으로써 지연 평가는 특히 큰 데이터 세트 또는 복잡한 계산을 처리할 때 성능을 크게 향상시킬 수 있습니다.
• 메모리 사용량 감소: 지연 평가는 즉시 필요하지 않은 중간 값의 생성을 피하여 메모리 사용량을 줄일 수 있습니다.
• 응답성 향상: 초기 로드 중에 불필요한 계산을 피함으로써 지연 평가는 애플리케이션의 응답성을 높일 수 있습니다.
• 무한 데이터 구조: 지연 평가를 사용하면 필요한 요소만 주문형으로 계산하여 무한 목록 또는 스트림과 같은 무한 데이터 구조로 작업할 수 있습니다.

예제: 이미지 지연 로딩

지연 평가의 일반적인 사용 사례는 이미지 지연 로딩입니다. 페이지의 모든 이미지를 미리 로드하는 대신 뷰포트에서 처음에는 보이지 않는 이미지의 로드를 지연할 수 있습니다. 이를 통해 초기 페이지 로드 시간을 크게 향상시키고 네트워크 대역폭 소비를 줄일 수 있습니다.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

이 예제에서는 IntersectionObserver API를 사용하여 이미지가 뷰포트에 들어올 때 감지합니다. 이미지가 보이면 해당 src 속성이 해당 data-src 속성 값으로 설정되어 이미지가 로드됩니다. 그런 다음 관찰자는 이미지를 다시 로드하지 않도록 관찰을 중단합니다.

예제: 메모이제이션

메모이제이션을 사용하여 비용이 많이 드는 함수 호출을 최적화할 수 있습니다. 다음은 예제입니다.

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulate a time-consuming calculation
  for (let i = 0; i < 100000000; i++) {
    // Do something
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');

이 예제에서 memoize 함수는 함수를 입력으로 받아 해당 함수의 메모이제이션된 버전을 반환합니다. 메모이제이션된 함수는 이전 호출의 결과를 캐싱하므로 동일한 인수를 사용하는 후속 호출은 원래 함수를 다시 실행하지 않고도 캐시된 결과를 반환할 수 있습니다.

코드 분할 vs. 지연 평가: 주요 차이점

코드 분할과 지연 평가 모두 강력한 최적화 기술이지만 성능의 서로 다른 측면을 해결합니다.

• 코드 분할: 코드를 더 작은 청크로 나누고 주문형으로 로드하여 초기 번들 크기를 줄이는 데 중점을 둡니다. 주로 초기 페이지 로드 시간을 개선하는 데 사용됩니다.
• 지연 평가: 값이 실제로 필요할 때까지 값의 계산을 지연시키는 데 중점을 둡니다. 주로 비용이 많이 드는 계산 또는 큰 데이터 세트를 처리할 때 성능을 개선하는 데 사용됩니다.

본질적으로 코드 분할은 미리 다운로드해야 하는 코드 양을 줄이는 반면, 지연 평가는 미리 수행해야 하는 계산 양을 줄입니다.

코드 분할 vs. 지연 평가를 사용해야 하는 경우

코드 분할

• 대규모 애플리케이션: 특히 여러 경로 또는 기능이 있는 많은 JavaScript 코드가 있는 애플리케이션의 경우 코드 분할을 사용합니다.
• 초기 로드 시간 개선: 코드 분할을 사용하여 초기 페이지 로드 시간을 개선하고 대화형 시간을 줄입니다.
• 네트워크 대역폭 감소: 코드 분할을 사용하여 네트워크를 통해 전송해야 하는 데이터 양을 줄입니다.

지연 평가

• 비용이 많이 드는 계산: 비용이 많이 드는 계산을 수행하거나 큰 데이터 세트에 액세스하는 함수에 지연 평가를 사용합니다.
• 응답성 향상: 지연 평가를 사용하여 초기 로드 중에 불필요한 계산을 지연하여 애플리케이션의 응답성을 향상시킵니다.
• 무한 데이터 구조: 무한 목록 또는 스트림과 같은 무한 데이터 구조로 작업할 때 지연 평가를 사용합니다.
• 미디어 지연 로딩: 페이지 로드 시간을 개선하기 위해 이미지, 비디오 및 기타 미디어 자산에 대한 지연 로딩을 구현합니다.

코드 분할 및 지연 평가 결합

많은 경우 코드 분할과 지연 평가를 결합하여 더 큰 성능 향상을 달성할 수 있습니다. 예를 들어 코드 분할을 사용하여 애플리케이션을 더 작은 청크로 나눈 다음 지연 평가를 사용하여 해당 청크 내에서 값의 계산을 지연할 수 있습니다.

전자 상거래 애플리케이션을 생각해 보세요. 코드 분할을 사용하여 애플리케이션을 제품 목록 페이지, 제품 세부 정보 페이지 및 결제 페이지에 대한 별도의 번들로 나눌 수 있습니다. 그런 다음 제품 세부 정보 페이지 내에서 지연 평가를 사용하여 이미지를 로드하거나 제품 추천 계산을 실제로 필요할 때까지 지연할 수 있습니다.

코드 분할 및 지연 평가 외: 추가 최적화 기술

코드 분할과 지연 평가는 강력한 기술이지만 JavaScript 성능 최적화에 있어서는 퍼즐의 두 조각일 뿐입니다. 성능을 더욱 향상시키기 위해 사용할 수 있는 몇 가지 추가 기술은 다음과 같습니다.

• 최소화: 코드에서 불필요한 문자(예: 공백, 주석)를 제거하여 크기를 줄입니다.
• 압축: Gzip 또는 Brotli와 같은 도구를 사용하여 코드를 압축하여 크기를 더욱 줄입니다.
• 캐싱: 브라우저 캐싱 및 CDN 캐싱을 활용하여 서버에 대한 요청 수를 줄입니다.
• 트리 셰이킹: 번들에서 사용하지 않는 코드를 제거하여 크기를 줄입니다.
• 이미지 최적화: 이미지를 압축하고, 적절한 크기로 조정하고, WebP와 같은 최신 이미지 형식을 사용하여 이미지를 최적화합니다.
• 디바운싱 및 스로틀링: 성능 문제를 방지하기 위해 이벤트 처리기가 실행되는 속도를 제어합니다.
• 효율적인 DOM 조작: DOM 조작을 최소화하고 효율적인 DOM 조작 기술을 사용합니다.
• 웹 워커: 계산 집약적인 작업을 웹 워커에 오프로드하여 기본 스레드를 차단하는 것을 방지합니다.

결론

JavaScript 성능 최적화는 긍정적인 사용자 경험을 제공하고 비즈니스 목표를 달성하는 데 중요한 측면입니다. 코드 분할과 지연 평가는 초기 로드 시간을 줄이고, 네트워크 대역폭 소비를 줄이고, 불필요한 계산을 지연시켜 성능을 크게 향상시킬 수 있는 두 가지 강력한 기술입니다. 이러한 기술이 어떻게 작동하는지, 언제 사용해야 하는지 이해함으로써 더 빠르고 응답성이 뛰어나고 더 즐거운 웹 애플리케이션을 만들 수 있습니다.

특정 애플리케이션 요구 사항을 고려하고 요구 사항에 가장 적합한 기술을 사용하는 것을 잊지 마십시오. 애플리케이션의 성능을 지속적으로 모니터링하고 최적화 전략을 반복하여 최상의 사용자 경험을 제공하는지 확인하십시오. 코드 분할과 지연 평가의 힘을 활용하여 기능이 풍부할 뿐만 아니라 성능이 뛰어나고 전 세계적으로 사용하기 즐거운 웹 애플리케이션을 만드십시오.

추가 학습 자료

• Webpack 설명서: https://webpack.js.org/
• Rollup 설명서: https://rollupjs.org/guide/en/
• Vite 설명서: https://vitejs.dev/
• MDN 웹 문서 - 교차 관찰자 API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google 개발자 - JavaScript 실행 최적화: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/